<template>
  <main class="aui-content" :class="{ 'aui-content--tabs': $route.meta.isTab }">
    <!-- 主入口标签页 s -->
    <el-dropdown v-if="$route.meta.isTab" class="aui-content--tabs-tools" :show-timeout="0">
      <i class="el-icon-arrow-down el-icon--right"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
        <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
        <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-tabs
      v-if="$route.meta.isTab"
      v-model="$store.state.contentTabsActiveName"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle">
      <el-tab-pane
        v-for="item in $store.state.contentTabs"
        :closable="true"
        :key="item.name"
        :label="item.title"
        :name="item.name"
        :class="{ 'is-iframe': item.type === 'iframe' }">
        <iframe
          v-if="item.type === 'iframe'"
          :src="item.iframeUrl"
          width="100%" height="100%" frameborder="0" scrolling="yes">
        </iframe>
        <keep-alive v-else>
          <router-view v-if="item.name === $store.state.contentTabsActiveName" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
    <!-- 主入口标签页 e -->
    <el-card v-else shadow="never">
      <keep-alive>
        <router-view />
      </keep-alive>
    </el-card>
  </main>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    // tabs, 选中tab
    selectedTabHandle (tab) {
      tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)
      if (tab.length >= 1) {
        this.$router.push({ name: tab[0].name })
      }
    },
    // tabs, 删除tab
    removeTabHandle (tabName) {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
      if (this.$store.state.contentTabs.length >= 1) {
        // 当前选中tab被删除
        if (tabName === this.$store.state.contentTabsActiveName) {
          this.$router.push({ name: this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1].name }, () => {
            this.$store.state.contentTabsActiveName = this.$route.name
          })
        }
      } else {
        this.$store.state.sidebarMenuActiveName = 'home'
        this.$router.push({ name: 'home' })
      }
    },
    // tabs, 关闭当前
    tabsCloseCurrentHandle () {
      this.removeTabHandle(this.$store.state.contentTabsActiveName)
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle () {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name === this.$store.state.contentTabsActiveName)
    },
    // tabs, 关闭全部
    tabsCloseAllHandle () {
      this.$store.state.contentTabs = []
      this.$store.state.sidebarMenuActiveName = 'home'
      this.$router.push({ name: 'home' })
    }
  }
}
</script>
